<div id="root">
    <daohanglan
   
     @click-left="clickLeftFn" 
     @click-right="clickRightFn" 
     title="商品创建"
     ></daohanglan>
    <h1>表单组件</h1>
    <biaodan :state="false" ref="yi"></biaodan>
    <biaodan :state="false" ref="er"></biaodan>
    <biaodan :state="false" ref="san"></biaodan>
    <biaodan :state="false" ref="si"></biaodan>
    <br>
    <hr>
    <button @click="canshu">提交</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="./qfui.css">
<script src="./qfui.js"></script>
<script>
const vm = new Vue({
    el: "#root",
    data: {

    },
    methods: {
        clickLeftFn(){
            alert('clickLeftFn')
        },
        clickRightFn(){
            alert('clickRightFn')
        },
        canshu(){
            console.log('表单数据',this.$refs.yi.yonghushuju);
            console.log('表单数据',this.$refs.er.yonghushuju);
            console.log('表单数据',this.$refs.san.yonghushuju);
            console.log('表单数据',this.$refs.si.yonghushuju);
            alert('商品创建请求接口')
        }
    }
})
</script>